import React, { Component } from 'react'
import style from './xiaoxi.module.css'
import Input from './input/input.js'
import Header from './header/header.js'
import Message from './message/message.js'
import Foot from "../../components/foot_router/foot_router"

import {connect} from "react-redux" 

 class index extends Component {
     componentDidMount(){
        
     }
    state={
        list:[],
        input:[],
    }
    addList=(val)=>{
        if(val.trim()===""){
            alert("发送不能为空")
            return ;
        }
        // console.log(str)

        this.setState({
            list:[...this.state.list,{id:Date.now(),text:val}],
            input : this.props.input.data
        })
    }
    render() {
        let {list} =this.state
        console.log(this.props.input)
        return (
            <div key={this.props.input.data}>
                <div>
                <Header></Header>
                <Message></Message>
                <Input onInput={this.addList}/>
                </div>
                <div>    
                    {
                        list.map((item,i)=><div key={i} className={style.box}>
                            <div className={style.time}>{this.props.input[i].data}</div>
                            <div className={style.content}>{item.text}</div>
                            <div className={style.headphoto}>
                            <span></span>
                            </div>
                        </div>)
                    }
                </div>
                <Foot/>
            </div>
        )
    }
}

export default connect(
    state=>({
        input : state.input
    }),
)
(index)